<template>
  <div>
    <treeselect 
      v-model="currentVal"  
      :max-height="200"
      :options="shopList"
      :default-expand-level="3"
      :disabled="disabled"
      placeholder="请选择店铺分类"/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import Treeselect from '@riophae/vue-treeselect'
  export default {
    components: {
      Treeselect
    },
    props: {
      value: {
        type: [String, Number],
        default: null
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        currentVal: this.value
      }
    },
    mounted() {
      this.$store.dispatch("getShopList", true)
    },
    computed: {
      ...mapGetters(['shopList'])
    },
    watch: {
      value(val) {
        this.currentVal = val
      },
      currentVal(value) {
        this.$emit('input', value)
      }
    }
  }
</script>